<template>
    <div class="const-container">
        <div v-for="(item, index) in list" :key="index" class="const-item">
            <div class="const-name">{{ item.key }}</div>
            <div class="const-value">{{ item.value }}</div>
        </div>
    </div>
</template>

<script>
export default {
    name: "ConstPanel",
    computed: {
        list() {
            return this.$store.getters.last.filter(v => v.key === "nowmileage" || v.key === "nowspeed" || v.key === "nowgentime")
        }
    }
}
</script>

<style scoped lang="scss">
.const-container{
  padding: 24px;
  display: flex;
  justify-content: space-around;
  .const-item{
    margin-right: 20px;
    .const-name{
      margin-bottom: 4px;
      color: rgba(0,0,0,.45);
      font-size: 14px;
    }
    .const-value{
      color: rgba(0,0,0,.85);
      font-size: 24px;
    }
  }
}
.dark-mode{
  .const-container{
    .const-item{
      .const-name{
        color: rgba(255,255,255,.45);
      }
      .const-value{
        color: rgba(255,255,255,.85);
      }
    }
  }
}
</style>
